<template>
  <!-- 文章列表 项 -->
  <van-cell :to="'/article/' + article.art_id" class="article-item">
    <!-- 1.标题插槽 -->
    <div slot="title" class="title">{{ article.title }}</div>

    <!-- 2.描述插槽 -->
    <div slot="label">
      <!-- 2.1 三张封面图片 -->
      <div v-if="article.cover.type === 3" class="cover-wrap">
        <van-image
          class="cover-item"
          v-for="(img, i) in article.cover.images"
          :key="i"
          width="100"
          height="100"
          :src="img"
        />
      </div>

      <!-- 2.2 文章描述：作者、评论数、相对发布日期 -->
      <div class="label-info-wrap">
        <span>{{ article.aut_name }}</span>
        <span>{{ article.comm_count }}评论</span>
        <span>{{ article.pubdate | relativeTime }}</span>
      </div>
    </div>

    <!-- 3.默认插槽-右侧图片显示 -->
    <van-image
      class="right-cover"
      slot="default"
      v-if="article.cover.type === 1"
      width="100"
      height="100"
      :src="article.cover.images[0]"
    />
  </van-cell>
</template>

<script>
export default {
  name: '',
  // 接收 父组件传来的 文章项 数据
  props: ['article'],
  data() {
    return {
      dog: 'ruiky',
    };
  },
  filters: {
    testF(v) {
      console.log(this); // undefined
      return v + '讨厌死鬼';
    },
  },
  created() {},
  methods: {},
  computed: {},
  watch: {},
  components: {},
};
</script>

<style lang="less" scoped>
.article-item {
  // 标题区域样式
  .title {
    font-size: 32px;
    color: #3a3a3a;
  }

  // 右侧 区域样式
  .van-cell__value {
    flex: unset;
    width: 232px;
    height: 146px;
    padding-left: 25px;
  }

  // 右侧 单张图片 样式
  .right-cover {
    width: 232px;
    height: 146px;
    border: 1px solid #ccc;
  }

  // 描述信息 样式
  .label-info-wrap span {
    font-size: 22px;
    color: #b4b4b4;
    margin-right: 25px;
  }

  // 三张图片 容器样式
  .cover-wrap {
    display: flex;
    padding: 30px 0;
    // 三张图 样式
    .cover-item {
      flex: 1;
      height: 146px;
      // 前2张图 样式
      &:not(:last-child) {
        padding-right: 4px;
      }
      // 三张图片整体样式
      /deep/ img {
        height: 146px !important;
        width: 100%;
        border: 1px solid #ccc;
      }
    }
  }
}
</style>
